<template>
	<view class="idCard">
		<view class="box1">
			请您使用有效身份证信息认证
		</view>
		<view class="inputs">
			<image class="sfzimg" :src="$wanlshop.oss(sfzz)" mode="" @click="chooseImage('zm',1)"></image>
			<image class="sfzimg mt80" :src="$wanlshop.oss(sfzf)" mode="" @click="chooseImage('fm',1)"></image>
			<!-- <view class="flex_input">
				<view class="name">
					姓 名 :
				</view>
				<u-input class="flex1 ml32" :disabled="status == 1" v-model="name" clearable
					placeholder="请输入姓名"></u-input>
			</view>
			<view class="flex_input mt36">
				<view class="name">
					证件号 :
				</view>
				<u-input class="flex1 ml32" maxlength="18" :disabled="status == 1" v-model="idcard" clearable
					type="idcard" placeholder="请输入身份证号码"></u-input>
			</view> -->

			<view class="shz" v-if="status == 0">
				<view class="f36 fb tac c3d">
					正在审核中......
				</view>
			</view>
			<view class="shz" v-if="status == 1">
				<view class="f36 fb tac primary">
					审核通过
				</view>
			</view>
			<view class="shz" v-if="status == 2">
				<view class="f36 fb tac error">
					审核失败，请重新上传身份证照片
				</view>
			</view>
			<view class="submit" @click="btnSub" v-if="status !== 1">
				立即认证
			</view>
			<view class="submit mt36" @click="get_real_auth" v-if="status == 0">
				刷新状态
			</view>
		</view>

		<view class="info f24 mt70 flex_y_center">
			<image style="width: 28rpx;height: 28rpx;" src="https://img.aibbyp.com/wechatUser/zhuyi.png" mode="">
			</image>
			<view class="flex1 ml12">
				实名认证仅用于检测您是否为真人用户，不会对信息做任何采集保留和泄露，请放心使用
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sfzz: '/wechatUser/sfzrm.png',
				sfzf: '/wechatUser/sfzgh.png',
				name: '',
				idcard: '',
				status: null,
			}
		},
		onLoad() {
			this.get_real_auth()
		},
		methods: {
			chooseImage(key, key1) { //选择图片
				console.log('--')
				let that = this
				uni.chooseImage({
					sourceType: ["camera", "album"],
					sizeType: "compressed",
					count: key1,
					success: res => {
						uni.showLoading({
							title: '上传中...'
						})
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage ==
													'local' ? null : updata
													.multipart,
												success: data => {
													if (key ==
														'zm') {

														this.ocrIdCard(
															'sfzz',
															data.url)

													}
													if (key ==
														'fm') {
														this.sfzf = data
															.url

													}

													uni.hideLoading()
												}
											});
										}
									});
								}
							}
						});
					}
				})
			},

			ocrIdCard(type, url) {
				console.log(this.$wanlshop.oss(url));
				this.$api.post({
					url: '/common/ocrIdCard',
					data: {
						image: this.$wanlshop.oss(url)
					},
					success: res => {
						console.log(res);
						this.sfzz = url
						this.name = res.Name
						this.idcard = res.IdNum
					}
				})
			},
			btnSub() {
				if (this.sfzf == '/wechatUser/sfzrm.png') {
					this.$wanlshop.msg('请上传身份证人像面')
					return
				}
				if (this.sfzf == '/wechatUser/sfzgh.png') {
					this.$wanlshop.msg('请上传身份证国徽面')
					return
				}

				if (this.name && this.idcard && this.idcard.length == 18) {
					this.$api.post({
						url: '/wanlshop/user/real_auth',
						data: {
							name: this.name,
							id_card: this.idcard,
							id_card_image: this.sfzz,
							id_card_back_image: this.sfzf
						},
						loadingTip: '提交中...',
					}).then(res => {
						this.get_real_auth()
					})
				} else {
					uni.showToast({
						title: '请正确填写姓名和身份证',
						icon: 'none'
					})
					return
				}
			},
			get_real_auth() {
				this.$api.get({
					url: '/wanlshop/user/get_real_auth',
					loadingTip: '加载中...'
				}).then(res => {
					// status 0 待审核 1已通过 2未通过 
					this.name = res.name
					this.status = res.status
					this.idcard = res.id_card
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.sfzimg {
		width: 514rpx;
		height: 330rpx;
	}

	.mt80 {
		margin-top: 60rpx;
	}

	.idCard {
		padding: 360rpx 0 0 0;
		height: 100vh;
		background-image: url('https://img.aibbyp.com/wechatUser/idcardbac.png');
		background-repeat: no-repeat;
		background-size: 750rpx 904rpx;
		background-color: #fff;

		.mt70 {
			padding: 0 90rpx;
			margin-top: 70rpx;
		}

		.shz {
			margin-top: 60rpx;
		}

		.box1 {
			margin-left: 34rpx;
			width: 680rpx;
			padding: 32rpx 34rpx;
			background: #FFEBE4;
			border-radius: 40rpx 40rpx 0 0;
			font-size: 32rpx;
			color: #505050;
			font-weight: bold;
		}

		.inputs {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
			padding: 0 62rpx;

			.flex_input {
				display: flex;
				align-content: center;
				background: #FAF5F3;
				height: 72rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				padding: 0 30rpx;

				.name {
					height: 72rpx;
					line-height: 72rpx;
					color: #1A1A1A;
					font-weight: bold;
					width: 120rpx;
					text-align: right;
				}
			}
		}

		.submit {
			width: 586rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background: linear-gradient(270deg, #FF7319 0%, #FF8F47 49%, #FF6400 100%);
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 80rpx 80rpx 80rpx 80rpx;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-left: 20rpx;
			margin-top: 60rpx;
			font-weight: 500;
		}
	}
</style>